<script setup>
import {ref, onMounted, onUnmounted, reactive} from 'vue';
import {
  Scene,
  WebGLRenderer,
  PerspectiveCamera,
  PlaneGeometry,
  MeshBasicMaterial,
  AxesHelper,
  Mesh,
  Color,
  BoxGeometry,
  SphereGeometry,
  MeshLambertMaterial,
  SpotLight,
  MeshMatcapMaterial,
  TextureLoader,
  MeshDepthMaterial,
  CameraHelper,
  SpotLightHelper,
  MeshPhongMaterial,
  PointLight,
  MeshStandardMaterial,
  PCFSoftShadowMap, AmbientLight
} from 'three'
//引入性能监视器stats.js
import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
const statsRef=ref()
stats.showPanel(0)
stats.dom.style.top='50px'
stats.dom.style.left='50px'
// document.body.appendChild(stats.domElement);
const width=window.innerWidth
const height=window.innerHeight
const container=ref()
const scene = new Scene();
const renderer = new WebGLRenderer()
renderer.setSize(width, height);
renderer.setClearColor(new Color(0xeeeeee));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFSoftShadowMap;

const camera = new PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(30,40,30);
camera.lookAt(scene.position)


const axes=new AxesHelper(50)
scene.add(axes)


const planeGeometry=new PlaneGeometry(60,20)
const meshBasicMaterial=new MeshLambertMaterial({color: 0xcccccc })
const plane=new Mesh(planeGeometry,meshBasicMaterial)
plane.receiveShadow=true
plane.rotation.x=-0.5*Math.PI
scene.add(plane)



const cubeGeometry=new BoxGeometry(4,4,4)
const cubeMaterial=new MeshLambertMaterial({color: 0xff0000 })
const a2=new Mesh(cubeGeometry,cubeMaterial)
a2.castShadow=true
a2.position.set(2,2,2)
scene.add(a2)



const sphereGeometry = new SphereGeometry( 2, 32, 16 );
const sphereMaterial = new MeshLambertMaterial( { color: 0x6666ff } );
const sphere = new Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.position.set(15,2,2)
scene.add( sphere );



const light = new PointLight( 0xffffff, 20000, 100 );
light.position.set( -15, 50, 50 );
light.castShadow = true;
scene.add( light );

// const helper = new CameraHelper( light.shadow.camera );
// scene.add( helper );
let step=0
function renderScene(){
  a2.rotation.x +=0.01;
  a2.rotation.y +=0.015;
  a2.rotation.z +=0.02;

  step +=0.02
  sphere.position.x=17+7*Math.cos(step)
  sphere.position.y=2+5*Math.abs(Math.sin(step))
  requestAnimationFrame(renderScene)
  renderer.render(scene,camera)
  stats.update();
}
renderScene()
onMounted(() => {
  statsRef.value?.append(stats.dom)
  container.value.appendChild(renderer.domElement);
  renderer.render(scene,camera)
})

window.addEventListener('resize',()=>{
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
})


</script>

<template>
  <div ref="statsRef"></div>
  <div ref="container"></div>
</template>

<style scoped>

</style>
